<template>
  <footer>
    <p>
      <span class="rotating">
        <digitalClock class="digitalClock"></digitalClock>
      </span>
    </p>
    <p class="text"><slot name="text"></slot></p>
    <p class="device"><slot name="device"></slot></p>
  </footer>
</template>

<script>
import digitalClock from "@/components/digitalClock.vue";
export default {
  components: { digitalClock },
  name: "HomeFooter",
  props: {
    beiAn: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="stylus" scoped>
@import '~styles/theme.styl';

footer {
  height: var(--footer-height);
  padding-top: 20px;
  color: #222;
  text-align: center;
  box-sizing: border-box;
  background-color: #0c0a0b;
  position: relative;
  bottom: 0;

  .rotating {
    display: inline-block;

    img {
      width: 30%;
    }
  }

  .device {
    margin: 15px 0 5px 0;
    text-align: center;
    font-size: 14px;
    color: #999;
  }

  .text {
    padding-top: 30px;
  }

  a {
    margin-top: 10px;
    font-size: 13px;
    color: #999;
    text-decoration: none;
  }
}

@keyframes masked-animation {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -100%, 0;
  }
}

.digitalClock {
  position: absolute;
  width: 100px !important;
}
</style>
